<template>
	<view class="bg" :class="{ show }" @click="emit('close')"></view>
	<view class="catalogue" :class="{ show }"
		:style="{ '--height': `${safeAreaInsets?.bottom}px` , 'background': isDark ? '#1D1D1F' : '#fff','color': isDark ? '#7E8286' : '#000' }">
		<view class="head" :style="{'color': isDark ? '#7E8286' : '#000' }">目录列表</view>
		<view class="list">
			<scroll-view style="height: 100%" scroll-y="true" @scrolltolower="emit('scrolltolower')">
				<view class="item" v-for="item in list" :key="item.index" @click="toChapter(item)">
					<text :class="{ active: item.index == chapterIndex }"
						:style="{'color': isDark ? '#7E8286' : '#000' }">{{ item.name }}</text>

					<text style="font-size: 24rpx" v-if="item.status == 1">已付费</text>
					<image class="icon" src="/static/bookBar/lock.svg" v-if="item.status == 2"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import { ChaptersItem } from '@/types/index'

	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)

	interface Props {
		show : boolean
		list : ChaptersItem[]
		chapterIndex : number
		isDark : boolean
	}

	withDefaults(defineProps<Props>(), {
		show: false,
		chapterIndex: -1
	})

	const emit = defineEmits(['close', 'toChapter', 'scrolltolower'])

	const toChapter = (index : number) => {
		if (index <= -1) return
		emit('toChapter', index)
	}
</script>

<style scoped lang="scss">
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		@include size(100%);
		opacity: 0;
		transform: translateY(100%);
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
		transition: opacity .4s;
		// bottom: 0;

		&.show {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.catalogue {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		transform: translateY(100vh);
		opacity: 0;
		z-index: 2;
		background: #fff;
		transition: all .4s;

		&.show {
			opacity: 1;
			transform: translateY(0);
		}

		.head {
			position: relative;
			padding: 32rpx 48rpx;
			@include tx(32rpx);
			font-weight: 500;
			color: #333;
			@include line(bottom, 48rpx, 48rpx, $color: #F2F2F2)
		}

		.list {
			height: 720rpx;

			.item {
				padding: 30rpx 48rpx;
				@include tx(30rpx);
				color: rgba(0, 0, 0, .3);
				@include flex(space-between, center);

				.active {
					color: rgba(0, 0, 0, .9)
				}

				.icon {
					@include size(32rpx);
				}
			}
		}
	}
</style>